<script setup>
import FilterBar from '@/components/FilterBar.vue'
import * as echarts from 'echarts'
import { onMounted, inject, reactive, nextTick, onUnmounted, computed } from 'vue'

const $http = inject('$http'),
  $timer = inject('$timer')

const colorList = ['#209DFD', '#0BB6D3', '#D45BD4', '#4B5DC2']

const itemHeight = computed(() => {
  return (screen.width / 100) * 2.917
})

const dataObj = reactive({
  list: [],
  selectValue: 'day',
  ageList: [],
  total: 0,
})

var dom
var myChart
var option

onMounted(() => {
  // 饼图
  dom = document.getElementById('scChart')
  myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  })

  getChartData()

  getBackHomeCount()
})

onUnmounted(() => {
  $timer.clearTimer()
})

function getChartData() {
  $http.get('/screen/place/scan/age-group', { params: { scope: dataObj?.selectValue } }).then(res => {
    const { data = [] } = res || {}

    const total = data.reduce((a, b) => a + b.value, 0) || 0,
      min = Math.floor((total * 35) / 100),
      yData =
        data.map((item, index) => {
          const value = item.value > min ? item.value : min,
            percent = value && total ? Number(((100 * value) / total).toFixed(2)) : 0

          return {
            ...item,
            value,
            color: colorList[index],
            percent,
          }
        }) || []

    dataObj.ageList = yData
    dataObj.total = total || 0

    option = {
      grid: {
        top: '0',
        bottom: '0',
        left: '0',
        right: '0',
        containLabel: true,
      },
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderColor: 'rgba(0,0,0,0)',
        textStyle: {
          color: '#ffffff',
        },
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['20%', '50%'],
          avoidLabelOverlap: false,
          roseType: 'area',
          label: {
            show: true,
            formatter: function (e) {
              return e?.data?.percent + '%'
            },
            color: '#ffffff',
          },
          labelLine: {
            show: true,
          },
          data: yData,
        },
      ],
    }

    if (option && typeof option === 'object') {
      myChart.setOption(option)
    }

    window.addEventListener('resize', myChart.resize)
  })
}

function getBackHomeCount() {
  $http
    .get('/screen/place/scan', { params: { scope: dataObj?.selectValue } })
    .then(res => {
      const { data = [] } = res || {}
      const list =
        data.map((item, index) => {
          return {
            ...item,
            id: index + 1,
            index: index,
          }
        }) || []

      dataObj.list = list || []
    })
    .then(nextTick)
    .then(() => {
      $timer.addTimer('table_qrcode_scancode')
    })
}

function change(item = {}) {
  dataObj.selectValue = item?.value || ''

  getChartData()

  nextTick(() => {
    getBackHomeCount()
  })
}
</script>

<template>
  <div class="scChartBox">
    <div class="title">重点场所码扫码情况</div>

    <FilterBar class="filterBox" :selectValue="dataObj.selectValue" @change="change" />

    <div class="scTop">
      <div class="line">
        <div style="flex: 0.8">排名</div>
        <div style="flex: 1">场所名称</div>
        <div style="flex: 1">类型</div>
        <div style="flex: 0.8">扫码量</div>
        <div style="flex: 0.8">黄码量</div>
        <div style="flex: 0.8">红码量</div>
      </div>

      <recycle-scroller
        id="table_qrcode_scancode"
        class="table scroll"
        :buffer="200"
        :item-size="itemHeight"
        key-field="id"
        :items="dataObj.list"
      >
        <template v-slot="{ item }">
          <div :class="['tr', item.index % 2 === 0 && 'trodd']">
            <div style="flex: 0.8">{{ item.index + 1 }}</div>
            <div style="flex: 1" class="ellipsis2">
              <el-tooltip
                effect="dark"
                :disabled="!(item?.label?.length > 9)"
                :content="item.label"
                placement="top"
              >
                {{ item.label }}
              </el-tooltip>
            </div>
            <div style="flex: 1">{{ item.placeTypeName }}</div>
            <div style="flex: 0.8">{{ item.total }}</div>
            <div style="flex: 0.8">{{ item.yellowCode }}</div>
            <div style="flex: 0.8">{{ item.redCode }}</div>
          </div>
        </template>
      </recycle-scroller>
    </div>

    <div class="scBottom">
      <div id="scChart" style="height: 100%" class="charts"></div>

      <div class="scData">
        <div class="total">总数: {{ dataObj.total }}</div>
        <div class="descItems">
          <div class="descItem" v-for="(item, index) in dataObj.ageList" :key="index">
            <div class="labelBox">
              <div class="label" :style="{ background: item.color }"></div>
              <div class="name">{{ item.label }}</div>
            </div>
            <div class="num">{{ item.value }}人</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.scChartBox {
  // width: 756px;
  height: 662px;
  background-image: url('@/assets/qrcode/boxbg1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .filterBox {
    margin: 13px 16px 12px 16px;
  }

  .scTop {
    flex: 1;
    margin: 12px 16px 0 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .line {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 20px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
    }
    .table {
      flex: 1;
      width: 100%;
      overflow: hidden auto;
      margin-top: 16px;

      .tr {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 56px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;

        &.trodd {
          background: rgba(19, 181, 177, 0.4);
        }
      }
    }
  }

  .scBottom {
    display: flex;
    align-items: flex-end;
    height: 179px;
    margin: 0 16px 24px 16px;
    overflow: hidden;

    .charts {
      flex: 1;
      overflow: hidden;
    }

    .scData {
      margin-left: 24px;
      width: 485px;

      .total {
        margin-left: 4px;
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
      }

      .descItems {
        display: flex;
        margin-top: 12px;

        .descItem {
          width: 89px;
          height: 52px;
          padding: 12px 0 12px 16px;
          background: rgba(19, 181, 177, 0.2);

          &:not(:first-child) {
            margin-left: 17px;
          }

          .labelBox {
            display: flex;
            align-items: center;

            .label {
              width: 16px;
              height: 16px;
              background: #209dfd;
              border-radius: 4px;
            }

            .name {
              margin-left: 6px;
              flex: 1;
              height: 20px;
              font-size: 14px;
              font-weight: 600;
              color: #ffffff;
              display: flex;
              align-items: center;
              white-space: nowrap;
            }
          }

          .num {
            margin-top: 12px;
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
// .scEffect {
//   height: 40%;
//   display: flex;
//   flex-direction: row;

//   .scChart {
//     position: relative;
//     margin-left: 20px;
//     height: 100%;
//     width: 180px;
//     .scChartDesc {
//       display: flex;
//       flex-direction: column;
//       align-items: center;
//       justify-content: center;
//       height: 100%;
//       width: 180px;
//       display: flex;
//       flex-direction: column;
//       align-items: center;
//       font-size: 16px;
//       top: 0;
//       left: 0;
//       color: white;
//       z-index: 999;
//       position: absolute;
//     }
//   }
//   .descItems {
//     display: flex;
//     flex-direction: row;
//     align-items: center;
//     .descItem {
//       display: flex;
//       flex-direction: column;
//       justify-content: space-around;
//       align-items: center;
//       height: 65px;
//       width: 74px;
//       background-color: rgba(24, 119, 201, 1);
//       margin: 10px;
//       border-radius: 5px;
//       font-size: 14px;
//       .scText {
//         font-size: 18px;
//         font-weight: 600;
//       }
//     }
//   }
// }
</style>
